<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-header style="background-color: #0095d7;text-align: center">
        <h1 style="color: white;font-size: 22px">
            疫情工作管理页面
        </h1>
    </el-header>
    <el-descriptions class="margin-top" title="添加领导信息" :column="3" size="" border>

        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                领导姓名
            </template>
            <input type="text" placeholder="输入姓名">
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                性别
            </template>
            <el-radio v-model="leader.gender" label="1">男</el-radio>
            <el-radio v-model="leader.gender" label="2">女</el-radio>
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                组织名称
            </template>
            <input type="text" placeholder="输入组织名称">
        </el-descriptions-item>

        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                职务
            </template>
            <el-dropdown>
                <el-button type="primary">
                    选择职务<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="j in joblist">{{j}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                联系电话
            </template>
            <input type="text" placeholder="输入电话">
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                辖区
            </template>
            <input type="text" placeholder="输入辖区">
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
            </template>
            <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="leader.textarea1">
            </el-input>
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                照片
            </template>
            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

            </el-upload>

        </el-descriptions-item>

        <template slot="extra">
            <el-button type="primary" size="small">修改</el-button>
        </template>

    </el-descriptions>

</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {

            return {
                leader:{gender:"",textarea1:""},
                joblist:["1","2"],
                fileList:[]




            }



        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }

        }

    })
</script>
</html>